<!--
* description: 装车完成
-->
<template>
  <div class="app-container app-container-table">
    <div class="filter-container filter-params">
      <el-row :gutter="26">
        <el-col :span="24">
          <component
            v-for="comp in tableComponents.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :codeField="comp.codeField"
            :textField="comp.textField"
            :popupsKey="comp.compKey"
            :is="comp.component"
            :code="formField[comp.codeField]"
            :text="formField[comp.textField]"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
            :disabled="comp.disabled"
            :isRequire="comp.isRequire"
            :span="comp.span || 6"
            :options="comp.options"
            :isMul="comp.isMul"
            :labelName="comp.labelName"
            :validrule="comp.validrule"
          ></component>
        </el-col>
      </el-row>
      <el-row :gutter="34" style="margin-bottom:5px;">
        <el-col :span="12">
          <div class="dialogTitle">
            <span class="dialogTitleSpan">发运清单</span>
            <span class="tipSpan"
              >注：当发运单号为空时，点击确认发运单会自动生成一个新的发运单号</span
            >
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <div class="dialogTitle tip">
              <span class="dialogTitleSpan">备件信息</span>
            </div>
            <div class="tip">
              <el-button class="iconfont icon-confirm" @click="confirm"
                >确认发运单</el-button
              >
              <el-button class="el-icon-delete" @click="del"
                >删除发运单</el-button
              >
              <el-button class="iconfont icon-confirm" @click="departConfirm"
                >发车确认</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row :gutter="34" style="margin-bottom:5px;">
        <el-col :span="12">
          <el-table
            :data="leftTableData"
            style="width: 100%"
            :height="tableHeight"
            ref="table"
            border
            v-loading="leftLoading"
          >
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="出库去向编号"
              align="center"
              prop="OUT_STORAGE_CODE"
            />
            <el-table-column
              label="出库去向名称"
              align="center"
              prop="PARTNER_SHORT_NAME"
            />
            <el-table-column label="箱号" align="center">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  class="el-icon-document"
                  :underline="false"
                  @click="detail(scope.row)"
                  style="font-size:12px;"
                  >{{ scope.row.CASE_CODE }}</el-link
                >
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="装车重量（kg）"
              align="center"
              prop="TRUCK_WEIGHT"
            />
            <el-table-column
              label="装车体积（m³）"
              align="center"
              prop="TRUCK_VOLUME"
            /> -->
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-table
            :data="RightTableData"
            style="width: 100%"
            :height="tableHeight"
            ref="table"
            border
            v-loading="rightLoading"
          >
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
              <el-table-column label="拣货任务号" prop="PICK_CODE" align="center" />
            <el-table-column label="备件编号" prop="PART_NO" align="center" />
            <el-table-column label="备件名称" prop="PART_NAME" align="center" />
            <el-table-column label="装箱数量" prop="INBOX_QTY" align="center" />

          </el-table>
        </el-col>
      </el-row>
      <!-- 表格 -->
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- 暂时不需要 -->
    </div>
    <div v-show="false">
      <div class="printRef">
        <div class="filter-container filter-params">
          <div class="printMain" ref="printRef">
            <div
              style="page-break-after:always;"
              class="printInfoP"
              v-for="(item, index) in reqData"
              :key="index"
            >
             <div class="printInfo1" >
                <h2>出库单</h2>
             </div>
              <div class="printInfo">
                <div class="printInfoDiv">
                  <div class="printInfoRow">
                    去向编码：{{ item.OUT_STORAGE_CODE }}
                  </div>
                  <div class="printInfoRow">
                    去向名称：{{ item.PARTNER_SHORT_NAME }}
                  </div>
                </div>
                <div class="printInfoDiv">
                  <div class="printInfoRow">
                    出库时间：{{ item.CREATED_DATE }}
                  </div>
                  <div class="printInfoRow">
                    出库仓库：{{ item.WAREHOUSE_NAME }}
                  </div>
                </div>
                <div class="printInfoDiv">
                  <div class="printInfoRow">
                    托运单号：{{ item.CONSIGN_ORDER_CODE }}
                  </div>
                  <div class="printInfoRow"></div>
                </div>
              </div>
              <div>
                <table border="1px" width="100%" style="text-align:center">
                  <tr>
                    <th>序号</th>
                    <th>出库单号</th>
                    <th>备件编号</th>
                    <th>备件名称</th>
                    <th>数量</th>
                    <th>箱号</th>
                    <th>出库类别</th>
                  </tr>
                  <tr v-for="(itemTable, index) in item.bodyList" :key="index">
                    <td>{{ index + 1 }}</td>
                    <td>{{ itemTable.OUT_CODE }}</td>
                    <td>{{ itemTable.PART_NO }}</td>
                    <td>{{ itemTable.PART_NAME }}</td>
                    <td>{{ itemTable.OUT_QTY }}</td>
                    <td>{{ itemTable.CASE_CODE }}</td>
                    <td>{{ itemTable.ORDER_TYPE_NAME }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formMixins } from "@/components/wms/mixins/formMixins";
import { wmsApis } from "@/api/wms/baseData/api";
import request from "@/utils/request";
export default {
  name: "loadCarFinished",
  // 组件混入对象
  components: {
    Xinputs: () =>
      import("@/components/wms/wmsEjectWindows/wmsTableInputPartInfo")
  },
  mixins: [formMixins],
  watch: {
    $route(val) {
      if (
        this.formField.pageId !== "" &&
        this.$route.query.pageId !== undefined &&
        this.$route.query.pageId !== this.formField.pageId
      ) {
        this.formField.pageId = this.$route.query.pageId;
        this.formField.pageName = this.$route.query.pageName;
        // this.queryTable();
      }
    }
  },
  created() {
    if (this.$route.query != null) {
      // 判断传入query参数，初始化数据
      if (this.$route.query.pageId != null && this.$route.query.pageId !== "") {
        this.formField.pageId = this.$route.query.pageId;
        this.formField.pageName = this.$route.query.pageName;
      }
    }
    this.querySelect();
  },
  mounted() {
    const that = this;
    // 设置网格高度自适应
    window.addEventListener("resize", () => {
      that.setTableHeight();
    });
  },
  updated() {
    const that = this;
    that.$nextTick(() => {
      that.setTableHeight();
    });
  },
  data() {
    return {
      // 动态组件-按钮
      tableButtons: [],
      // 动态组件-查询条件
      tableComponents: [
        {
          compKey: "compKey1",
          labelName: "仓库名称",
          codeField: "WAREHOUSE_ID",
          component: () => import("@/components/wms/dropdownList/dropdownList"),
          type: "dropdownList",
          isMust: true,
          isMul: false,
          options: [],
          isRequire: true,
          changed: val => {
            this.formField.CONSIGN_ORDER_ID = "";
            this.tableComponents[1].options = [];
            this.leftTableData = [];
            this.RightTableData = [];
            this.formField.LOGISTICS_SUP_CODE = "";
            this.formField.LOGISTICS_CODE = "";
            this.formField.CAR_TYPE_CODE = "";
            this.formField.CAR_NO = "";
            this.formField.DRI_NAME = "";
            this.formField.DRIVER_CONNECT = "";
            if (!val) {
              return;
            }
            request({
              url:
                "/mp/wm/vl/warehouse/outstoragetask/queryConsignOrderCode.do",
              method: "post",
              data: {
                WAREHOUSE_ID: val
              }
            }).then(res => {
              if (res.listRow && res.listRow.length > 0) {
                res.listRow.map(item => {
                  this.tableComponents[1].options.push({
                    label: item.CONSIGN_ORDER_CODE,
                    value: item.CONSIGN_ORDER_ID
                  });
                });
              }
            });
          }
        },
        {
          compKey: "compKey2",
          labelName: "发运单号",
          codeField: "CONSIGN_ORDER_ID",
          component: () => import("@/components/wms/dropdownList/dropdownList"),
          type: "dropdownList",
          isMust: true,
          isMul: false,
          options: [],
          changed: val => {
            this.leftTableData = [];
            this.RightTableData = [];
            if (!val) {
              this.formField.LOGISTICS_SUP_CODE = "";
              this.formField.LOGISTICS_CODE = "";
              this.formField.CAR_TYPE_CODE = "";
              this.formField.CAR_NO = "";
              this.formField.DRI_NAME = "";
              this.formField.DRIVER_CONNECT = "";
              return;
            }
            this.leftLoading = true;
            request({
              url: "/mp/wm/vl/warehouse/outstoragetask/queryConsignOrder.do",
              method: "post",
              data: {
                CONSIGN_ORDER_ID: val
              }
            }).then(res => {
              this.leftLoading = false;
              if (res.mapRow && res.mapRow.CONSIGN_ORDER_CODE) {
                this.formField.LOGISTICS_SUP_CODE =
                  res.mapRow.LOGISTICS_SUP_CODE;
                this.formField.LOGISTICS_CODE = res.mapRow.LOGISTICS_CODE;
                this.formField.CAR_TYPE_CODE = res.mapRow.SEND_CAR_TYPE;
                this.formField.CAR_NO = res.mapRow.CAR_NO;
                this.formField.DRI_NAME = res.mapRow.DRI_NAME;
                this.formField.DRIVER_CONNECT = res.mapRow.DRIVER_CONNECT;
              } else {
                this.formField.LOGISTICS_SUP_CODE = "";
                this.formField.LOGISTICS_CODE = "";
                this.formField.CAR_TYPE_CODE = "";
                this.formField.CAR_NO = "";
                this.formField.DRI_NAME = "";
                this.formField.DRIVER_CONNECT = "";
              }

              if (res.listRow && res.listRow.length > 0) {
                this.leftTableData = res.listRow;
              } else {
                this.leftTableData = [];
                this.$message({
                  message: "该发运单号无发运清单",
                  uration: 2000
                });
              }
            });
          }
        },
        {
          compKey: "compKey3",
          labelName: "物流公司",
          codeField: "LOGISTICS_SUP_CODE",
          component: () => import("@/components/wms/dropdownList/dropdownList"),
          type: "dropdownList",
          isMust: true,
          isMul: false,
          options: [],
          isRequire: true
        },
        {
          compKey: "compKey4",
          labelName: "物流单号",
          codeField: "LOGISTICS_CODE",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
          isRequire: false
        },
        {
          compKey: "compKey5",
          labelName: "车型",
          codeField: "CAR_TYPE_CODE",
          component: () => import("@/components/wms/dropdownList/dropdownList"),
          type: "dropdownList",
          isMust: true,
          isMul: false,
          options: [],
          isRequire: true
        },
        {
          compKey: "compKey6",
          labelName: "车牌号",
          codeField: "CAR_NO",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
          isRequire: true
        },
        {
          compKey: "compKey7",
          labelName: "司机",
          codeField: "DRI_NAME",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
          isRequire: true
        },
        {
          compKey: "compKey8",
          labelName: "司机电话",
          codeField: "DRIVER_CONNECT",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
          isRequire: true
        }
      ],
      //表单查询数据
      formField: {
        WAREHOUSE_ID: "",
        CONSIGN_ORDER_ID: "",
        LOGISTICS_SUP_CODE: "",
        LOGISTICS_CODE: "",
        CAR_TYPE_CODE: "",
        CAR_NO: "",
        DRI_NAME: "",
        DRIVER_CONNECT: ""
      },
      //左表格数据
      leftTableData: [],
      //右表格数据
      RightTableData: [],
      tableHeight: 50,
      leftCheckTableList: [],
      // 左表格加载
      leftLoading: false,
      // 右表格加载
      rightLoading: false,
      reqData: []
    };
  },
  methods: {
    departConfirm() {
      // if (!this.formField.WAREHOUSE_ID) {
      //   this.$message({
      //     message: "请选择仓库名称",
      //     uration: 2000
      //   });
      //   return;
      // }
      // if (!this.formField.CONSIGN_ORDER_ID) {
      //   this.$message({
      //     message: "请选择发运单号",
      //     uration: 2000
      //   });
      //   return;
      // }
      this.$utils.validataMoth(this, "validpopup");
      if (this.valid) {
        this.$confirm("确定要发车确认吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(() => {
            let departConfirmLoading = this.$loading({
              lock: true,
              text: "正在确认...",
              // spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
              fullscreen: true
            });
            request({
              url: "/mp/wm/vl/warehouse/outstoragetask/departConfirm.do",
              method: "post",
              data: this.formField
            }).then(res => {
              departConfirmLoading.close();
              if (res.result === "1") {
                this.$message({
                  type: "success",
                  message: "发车确认成功!"
                });
                this.tableComponents[1].options = [];
                this.leftTableData = [];
                this.RightTableData = [];
                for (let key in this.formField) {
                  this.formField[key] = "";
                }
                this.reqData = res.listRow;
                // this.$forceUpdate();
                let styles = "";
                this.$nextTick(() => {
                  this.$printJs.printByEle(this.$refs.printRef, styles);
                  this.$printJs.getStyle(this.$refs.printRef);
                });
              } else {
                this.$message({
                  message: res.debugMsg ? res.debugMsg : res.msg
                });
              }
            });
          })
          .catch(err => {
            console.info(err);
          });
      }
    },
    del() {
      if (this.formField.CONSIGN_ORDER_ID) {
        this.$confirm("确定要删除发运单吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(() => {
            request({
              url: "/mp/wm/vl/warehouse/outstoragetask/deleteConsignOrder.do",
              method: "post",
              data: {
                CONSIGN_ORDER_ID: this.formField.CONSIGN_ORDER_ID
              }
            }).then(res => {
              if (res.result === "1") {
                this.$message({
                  type: "success",
                  message: "删除发运单成功!"
                });
                this.leftTableData = [];
                this.RightTableData = [];
                this.formField.CONSIGN_ORDER_ID = "";
                this.formField.LOGISTICS_SUP_CODE = "";
                this.formField.LOGISTICS_CODE = "";
                this.formField.CAR_TYPE_CODE = "";
                this.formField.CAR_NO = "";
                this.formField.DRI_NAME = "";
                this.formField.DRIVER_CONNECT = "";
                this.tableComponents[1].options = [];
                this.tableComponents[0].changed(this.formField.WAREHOUSE_ID);
              } else {
                this.$message({
                  type: "success",
                  message: res.debugMsg ? res.debugMsg : res.msg
                });
              }
            });
          })
          .catch(err => {
            console.info(err);
          });
      } else {
        this.$message({
          message: "请选择发运单号"
        });
      }
    },
    confirm() {
      this.$utils.validataMoth(this, "validpopup");
      if (this.valid) {
        this.$confirm("确定要确认发运单吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(() => {
            request({
              url: "/mp/wm/vl/warehouse/outstoragetask/confirmConsignOrder.do",
              method: "post",
              data: this.formField
            }).then(res => {
              if (res.result === "1") {
                this.$message({
                  type: "success",
                  message: "确认发运单成功!"
                });
                if (this.formField.CONSIGN_ORDER_ID) {
                  this.tableComponents[1].changed(
                    this.formField.CONSIGN_ORDER_ID
                  );
                } else {
                  this.tableComponents[1].options = [];
                  this.tableComponents[0].changed(this.formField.WAREHOUSE_ID);
                }
                this.formField.LOGISTICS_SUP_CODE = "";
                this.formField.LOGISTICS_CODE = "";
                this.formField.CAR_TYPE_CODE = "";
                this.formField.CAR_NO = "";
                this.formField.DRI_NAME = "";
                this.formField.DRIVER_CONNECT = "";
              } else {
                this.$message({
                  type: "success",
                  message: res.debugMsg ? res.debugMsg : res.msg
                });
              }
            });
          })
          .catch(err => {
            console.info(err);
          });
      }
    },
    querySelect() {
      request({
        url: "/mp/wm/vl/basedata/warehouseuser/queryUserByWHBox.do",
        method: "post",
        data: {
          IS_ENABLE: "1"
        }
      }).then(res => {
        if (res.listRow && res.listRow.length > 0) {
          res.listRow.map(item => {
            this.tableComponents[0].options.push({
              label: item.WAREHOUSE_NAME,
              value: item.WAREHOUSE_ID
            });
          });
        }
      });

      request({
        url: "/mp/wm/vl/basedata/boxcommon/queryLogisticsBox.do",
        method: "post",
        data: {}
      }).then(res => {
        if (res.listRow && res.listRow.length > 0) {
          res.listRow.map(item => {
            this.tableComponents[2].options.push({
              label: item.LOGISTICS_SUP_NAME,
              value: item.LOGISTICS_SUP_CODE
            });
          });
        }
      });

      request({
        url: "/mp/wm/vl/basedata/boxcommon/queryScartBox.do",
        method: "post",
        data: {}
      }).then(res => {
        if (res.listRow && res.listRow.length > 0) {
          res.listRow.map(item => {
            this.tableComponents[4].options.push({
              label: item.CAR_TYPE_NAME,
              value: item.CAR_TYPE_CODE
            });
          });
        }
      });
    },
    // 设置网格高度
    setTableHeight() {
      this.$nextTick(function() {
        this.tableHeight =
          window.innerHeight -
          this.getElementToPageTop(this.$refs.table.$el) -
          40;
      });
    },
    getElementToPageTop(el) {
      if (el.parentElement) {
        return this.getElementToPageTop(el.parentElement) + el.offsetTop;
      }
      return el.offsetTop;
    },
    detail(row) {
      this.rightLoading = true;
      request({
        url: "/mp/wm/vl/warehouse/outstoragetask/queryCaseCode.do",
        method: "post",
        data: {
          CASE_CODE: row.CASE_CODE
        }
      }).then(res => {
        this.rightLoading = false;
        if (res.listRow && res.listRow.length > 0) {
          this.RightTableData = res.listRow;
        } else {
          this.RightTableData = [];
          this.$message({
            message: "该箱号无备件信息",
            uration: 2000
          });
        }
      });
    }
  }
};
</script>
<style type="text/css" lang="scss" scoped>
/deep/ .el-checkbox {
  float: none;
  height: 20px;
}
.dialogTitle {
  text-align: left;
  .dialogTitleSpan {
    font-size: 16px;
    display: inline-block;
    font-weight: 600;
  }
  .tipSpan {
    color: red;
    margin-left: 15px;
  }
}
@page
{size: auto; margin: 20mm;} .footer {display: none;}
.tip {
  display: inline-block;
  width: 50%;
}
@media print {
  .printMain {
    width: 100%;
    .printInfo {
      padding-left: 90px;
      text-align: left;
      .printInfoDiv {
        display: flex;
        // display: inline-block;
        justify-content: space-between;
        .printInfoRow {
          padding-bottom: -50px;
          flex: 1;
        }
      }
    }
    .printInfo1 {
      text-align: center;
      font-size: 16px;
    }
    .printInfo {
      padding-left: 1px;
    }
    .printInfoP {
      padding-top: 20px;
    }
    .printfooter {
      width: 100%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border: 1px dashed #000;
      margin-top: 30px;
    }
  }
}
</style>
